<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/base.css"/>
		<link rel="stylesheet" href="css/sytle.css"/>
	</head>
	<body>
		<div class="wrap">
			<!--头部开始-->
			<div class="head">
				<div class="navbox" id="navbox">
					<div class="nav comWidth clearfix" id="nav">
			          	<h1><img src="img/logo.png"></h1>
			            <ul class="fr">
			                <li class="active"><a href="javascript:;">首页</a></li>
			                <li><a href="#introduce">About我</a></li>
			                <li><a href="#caseBox">炫酷作品</a></li>
			                <li><a href="#jinengBox">技能一览</a></li>
			                <li class="lastLi"><a href="#foot">联系我</a></li>
			            </ul>
			        </div>
				</div>
				<div class="tab container" id="container">
					<ul>
						<li style="opacity: 1;">
							<img src="img/bg1.jpg" />
		               		<div class="text d1" style="display:block;">
		                    	<h2>我是web工程师</h2>
		                        <p>这是我设计并制作的个人网站</p>
		                	</div>
						</li>
						<li>
			            	<img src="img/bg2.jpg" />
			                <div class="text d2">
		                    	<h2>彪悍的人生不解释</h2>
		                        <p>make great efforts</p>
			                </div>
			            </li>
           				<li>
			            	<img src="img/a5.jpg" />
			            	<div class="text d3">
		                    	<h2>不一样的你 加油</h2>
		                        <p>Never & say Give up</p>
			                </div>    
			            </li>
					</ul>
					 <ol class="dot">
			        	<li class="active"></li>
			            <li></li>
			            <li></li>
			        </ol>
			        <a href="javascript:;" class="btn" id="next">&gt;</a>
			        
        			<a href="javascript:;" class="btn" id="prev">&lt;</a>
				</div>
			</div>
			<!--头部结束-->
			<!--内容开始-->
			<div class="content">
				<!--介绍-->
				<div class="introduce" id="introduce">
	                <div class="text1" id="text1">
	                	<p><img src="img/qm.jpg" /></p>
	                </div>
				</div>
				<!--案例-->
				<div class="caseBox clearfix" id="caseBox">
					<ul class="case fl">
						<li>
							<img src="img/1.png" alt="1" style="width:80px"/>
							<img src="img/2.png" alt="2" style="width:80px"/>
							<img src="img/3.png" alt="3" style="width:80px"/>
							<img src="img/4.png" alt="4" style="width:80px"/>
							<img src="img/5.png" alt="5" style="width:80px"/>
						</li>
						<li>
							<div>首页</div>
                            <div>作品</div>
                            <div>郑益明</div>
                            <div>等你哦</div>
                            <div class="bgBox"></div>
						</li>
						<li>
							<div class="box">
								<div class="list"></div>
								<div class="list"></div>
								<div class="list"></div>
								<div class="list"></div>
								<div class="list"></div>
								<div class="list"></div>
								<div class="list"></div>
								<div class="list"></div>
								<div class="list"></div>
							</div>
						</li>
						
                      	<li  class="active">
                      		<div class="box"></div>
                      	</li>
                      	<li>
                      		<canvas width="800" height="600"></canvas>
                      	</li>
					</ul>
					<ol class="menu fl">
	                	<li>苹果菜单</li>
						<li>导航栏</li>
						<li>照片墙</li>
						<li class="active">3D展</li>
						<li>星空</li>
	              </ol>
				</div>
			</div>
			<!--技能-->
			<div class="jinengBox clientH" id="jinengBox">
		    	<div class="maskContact">
		          <ul id="ulJnyl" class="clearfix">
		              <li class="li1">
		              	<div>
		              		<h3>HTML+css</h3>
		                	<p>能快速标准的还原设计稿<br>能处理各种兼容问题</p>
		                </div>
		              	<span><p>HTML+CSS<br>精通</p></span>
		              </li>
		              <li class="li2">
		              	<div>
		              		<h3>Javascript</h3>
		                	<p>熟练手写原生JS<br>掌握并且灵活运用相关知识点</p>
		                </div>
		                <span><p>Javascript<br>精通</p></span>
		              </li>
		              <li class="li3">
		              	<div>
		              		<h3>Jquery</h3>
		                	<p>精通Jquery<br>熟练的与css3配合写出炫酷效果</p>
		                </div>
		               <span><p>Jquery<br>精通</p></span>
		              <li class="li4">
		              	<div>
		              		<h3>HTML5</h3>
		                	<p>熟练运用Html5<br>能够写基础的html5小游戏</p>
		                </div>
		              	<span><p>HTML5<br>熟练</p></span>
		               </li>
		              <li class="li5">
		              	<div>
		              		<h3>CSS3</h3>
		                	<p>灵活运用CSS3<br>配合js写出炫酷动画</p>
		                </div>
		              	<span><p>CSS3<br>精通</p></span>
		              </li>
		              <li class="li6">
		              	<div>
		              		<h3>BootStrap</h3>
		                	<p>灵活使用框架<br>熟悉响应式布局</p>
		                </div>
		              	<span><p>BootStrap<br>熟练</p></span>
		               </li>
		              <li class="li7">
		              	<div>
		              		<h3>AngularJs</h3>
		                	<p>掌握基础的AngularJs<br>基本知识点掌握</p>
		                </div>
		              	<span><p>AngularJs<br>基础</p></span>
		               </li>
		              <li class="li8">
		              	<div>
		              		<h3>RequireJs</h3>
		                	<p>熟练使用RequireJs<br>掌握模块化管理代码</p>
		                </div>
		              <span><p>RequireJs<br>熟练</p></span>
		              </li>
		              <li class="li9">
		              <div>
		              		<h3>git</h3>
		                	<p>熟练使用git<br>熟悉git工作流程</p>
		                </div>
		              <span><p>git<br>基础</p></span>
		              </li>
		              <li class="li10">
		              	<div>
		              		<h3>PHP</h3>
		                	<p>了解基础知识</p>
		                </div>
		             <span><p>PHP<br>基础</p></span>
		              </li>
				</ul>	
		    </div>
    		</div>
			<!--内容结束-->
			<!--尾部开始-->
			<div class="foot" id="foot">
				<div class="contactBox clientH">
			    	<div class="maskContact">
			            <div class="contact">
			                <h2>重要事情说三遍</h2>
			                <p>18858418480  18858418480 18858418480</p>
			                <p>superzym123@163.com  superzym123@163.com  superzym123@163.com </p>
			                <p>有缘请来电 </p>
			            </div>
			        </div>
   				</div>
			</div>
		</div>
		<script src="js/common.js"></script>
		<script src="js/main.js"></script>
		<script src="js/cases.js"></script>
		<script src="js/fenkuai.js"></script>
		<script src="js/sky.js"></script>
		<script src="js/skill.js"></script>
		<script type="text/javascript">
			var oContainer=$('.container');
			var oHavbox=document.getElementById('navbox');
			var clientH=document.documentElement.clientHeight;
			oContainer.style.height=clientH-oHavbox.offsetHeight+'px';
		</script>
	</body>
</html>
